<template>
  <div id="EconomicGain">
    <div class="list-div" v-if="show">
      <ul class="list-ul">
        <li v-for="(item, index) in news_list" :key="'finacial_' + index">
            <router-link :to="{path:'/EconomicTrade/EconomicGain/NewsInfo', query:item}" class="news-link">
               <span v-html="item.title" :title="item.title"></span>
             </router-link>
            <span>【{{item.createDate | getTime}}】</span>
          </li>
      </ul>
    </div>
    <div class="pageInfo">
       <Page class="page-list" :total="countNum" show-total :current="curPageIndex" :page-size="pageSize" @on-change="changeHandle"></Page>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import baseConfig from "../../publicLib/baseConfig/baseConfig";
  import {Storage} from '../../publicLib/utils-lib/main'

  let localStorage = new Storage('localStorage');

  export default{
    name: "EconomicGain",
    data() {
      return {
        news_list:[],//baseConfig.jmtd.cooperList,
        show: true,
        curPageIndex: 1,
        countPage: 10,
        countNum: 10,
        pageSize: 4,
        show: true
      }
    },
    filters: {
       getTime: function (value) {
          return value.split(' ')[0]
       }
    },
    watch: {
      $route(to, from) {
        if (to.name === 'EconomicGain') {
          this.show = true
        } else {
          this.show = false
        }

        // 缓存当前页
        localStorage.setItem('EconomicGainShow', this.show)
      }
    },
  methods: {
     getNewsList (index) {
        this.$fetch('newslist', {newstypes: '12',pageNo: index})
           .then(response => {
              //成功获取服务器数据
              if (response.code === "200") {
                 let data = response.data;
                    this.curPageIndex = data.pageNo;
                    this.countPage = data.page_num;
                    this.countNum = data.count;
                    this.pageSize = data.pageSize;

                    this.news_list = [];
                    let ary = data.list;
                    let len = ary.length;

                    for (let i = 0; i < len; i++) {
                     this.news_list.push(ary[i]);
                    }
                 }
              }
           )
        },
        /* 分页改变事件 */
        changeHandle (curIndex) {
           this.curPageIndex = curIndex;
           this.getNewsList(curIndex);
        }
     },
     mounted () {
       this.getNewsList(this.curPageIndex);
       /* 如果现实的是详情页面，刷新浏览器仍然显示详情页 */
       let show = localStorage.getItem('EconomicGainShow');

         if (show === 'false') {
              this.show = false;
         }
       },
        destroyed () {
            localStorage.removeItem('EconomicGainShow')
        }
  }
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';


  #EconomicGain{
     width: 100%;
     font-size: 1rem;

      .list-div{
        width: 95%;
        margin: 0 auto;
        text-align: left;
        font-size: 1rem;

        .list-ul{
          margin: 2rem 0;

          li{
            width: 90%;
            line-height: 2rem;
            border-bottom: #D6D6D6 0.09rem dashed;
            list-style-type: square;

            .news-link{
              span{
                width: 80%;
                display: block;
                color: $data-detail-font-color;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                float: left;
              }
            }

            &:hover{
              cursor: pointer;

              span, a{
                color: $default-layout-color;
              }
            }
          }

          span{
            float: right;
          }
        }
      }

     .pageInfo{
       .page-list{
         float: right;
         margin-right: 1rem;
       }
     }
   }
</style>
